<script lang="ts" setup>
import { reactive } from 'vue'
import { NButton, NCard, NSpace } from 'naive-ui'
import { Greet } from '../../wailsjs/go/main/App'

const message = '欢迎使用 NaiveUI + UnoCSS'

const data = reactive({
  name: "",
  resultText: "Please enter your name below 👇",
})

function greet() {
  Greet(data.name).then(result => {
    data.resultText = result
  })
}
</script>

<template>
  <div class="w-full h-full flex-center flex-col">
    <n-card class="w-full max-w-2xl h-full flex flex-col">
      <template #header>
        <div class="text-xl font-bold">{{ message }}</div>
      </template>
      <div class="flex-1 flex-center flex-col justify-between py-6">
        <n-space vertical :size="24" class="flex-1 flex-center flex-col justify-center">
          <div id="result" class="h-5 leading-5 text-center">{{ data.resultText }}</div>
          <div id="input" class="flex items-center">
            <input 
              id="name" 
              v-model="data.name" 
              autocomplete="off" 
              class="h-[30px] leading-[30px] px-2.5 rounded border-none outline-none bg-gray-100 hover:bg-white focus:bg-white transition-colors"
              type="text"
            />
            <button 
              class="w-[60px] h-[30px] leading-[30px] ml-5 px-2 rounded border-none cursor-pointer bg-gray-200 hover:bg-gradient-to-t hover:from-gray-300 hover:to-gray-200 hover:text-gray-800 transition-all"
              @click="greet"
            >
              Greet
            </button>
          </div>
          <div class="flex-center">
            <n-space>
              <n-button type="primary" size="large">
                主要按钮
              </n-button>
              <n-button type="info" size="large">
                信息按钮
              </n-button>
              <n-button type="success" size="large">
                成功按钮
              </n-button>
              <n-button type="warning" size="large">
                警告按钮
              </n-button>
              <n-button type="error" size="large">
                错误按钮
              </n-button>
            </n-space>
          </div>
        </n-space>
        <div class="text-sm text-gray-400 mt-auto pt-6">
          <p>✨ NaiveUI 组件库已集成</p>
          <p>🎨 UnoCSS 原子化 CSS 已配置</p>
        </div>
      </div>
    </n-card>
  </div>
</template>

